<template>
  <view class="bottom-nav">
    <nut-button plain type="info" size="small" @click="prevQuestion">上一题</nut-button>
    <IconFont name="star-fill" size="32" :style="{ color: isCollected ? '#FFD700' : '#ddd' }" @click="toggleCollect" />
    <nut-button plain type="info" size="small" @click="showCard">答题卡</nut-button>
    <nut-button plain type="info" size="small" v-show="AnalyseOrSubmit" @click="showAnalysis">解析</nut-button>
    <nut-button plain type="info" size="small" v-show="!AnalyseOrSubmit" @click="submitExam">提交</nut-button>
    <nut-button plain type="info" size="small" @click="nextQuestion">下一题</nut-button>
  </view>
<!-- 答题卡弹窗 -->
  <view v-show="showCardModal" 
   class="answer-sheet-modal" :class="{ 'show': showCardModal }">
    <view class="sheet-header">
      <text>答题卡</text>
      <IconFont name="close" size="10" @click="hideCard" />
    </view>
    <view class="sheet-body">
      <view v-for="(item, index) in questionList" :key="index" class="question-circle" :class="{
        current: index === currentQuestion,
        answered: isQuestionAnswered(index),
        correct: isQuestionCorrect(index) === 1,
        wrong: isQuestionCorrect(index) === 0
      }" @click="goToQuestion(index)">
        {{ index + 1 }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { IconFont } from '@nutui/icons-vue'
import Taro from '@tarojs/taro'
const props = defineProps([
  'showCardModal',
  'currentQuestion',
  'questionList',
  'answeredQuestions',
  'answerRecordList',
  'isQuestionAnswered',
  'isQuestionCorrect',
  'isCollected',
  'AnalyseOrSubmit'
])

const emit = defineEmits([
  'update:showCardModal',
  'prevQuestion',
  'nextQuestion',
  'goToQuestion',
  'update:showAnalysis',
  'toggleCollect',
  'submitExam'
])

function submitExam(){
  emit('submitExam')
}
//收藏的方法
function toggleCollect(){
  emit('toggleCollect')
}
function prevQuestion() {
  if (props.currentQuestion > 0) {
    emit('prevQuestion')
  }else {
    Taro.showToast({
      title: '已经是第一题了',
      icon: 'none',
    })
  }
}

function nextQuestion() {
  emit('nextQuestion')
}

function showCard() {
  emit('update:showCardModal', true)
}

function hideCard() {
  emit('update:showCardModal', false)
  console.log("卡片的变化",props.showCardModal);
}

function goToQuestion(index) {
  emit('goToQuestion', index)
  emit('update:showCardModal', false)
}
// 显示解析
function showAnalysis() {
  emit('update:showAnalysis')
}
</script>

<style lang="scss" scoped>
</style>